<script setup lang="ts">
import { LedScreenCanvas, Matrix, Polygon, Rectangle } from "led-screen-canvas";
import { ref } from "vue";

const canvasRef = ref();

const onReady = () => {
  // 一个六边形
  const polygon = new Polygon(
    [
      [0, 0],
      [100, 0],
      [50, 87], // 60度角的顶点
      [-50, 87], // 120度角的顶点
      [-100, 0], // 180度角的顶点
      [-50, -87], // 240度角的顶点
    ],
    4,
    15
  );
  canvasRef.value.addShapes([polygon]);
};
</script>

<template>
  <a-space direction="vertical" style="width: 100%" wrap>
    <a-space>
      <a-button type="primary" @click="canvasRef.start()">开始渲染</a-button>
      <a-button type="primary" status="danger" @click="canvasRef.stop()"
        >暂停渲染(避免多个画布导致浏览器卡顿)</a-button
      >
      <a-button @click="canvasRef.resetZoom()">缩放到最适合的大小</a-button>
      <a-button @click="canvasRef.zoom2RealSize()">缩放到原始尺寸</a-button>
    </a-space>
    <led-screen-canvas
      style="height: 400px; background-color: #dddddd"
      ref="canvasRef"
      @on-ready="onReady"
    />
  </a-space>
</template>

<style scoped lang="less"></style>
